import Vue from 'vue'
import Vuex from 'vuex'
import { createLogger } from 'vuex'
// npm i vuex-persistedstate // 解决数据一刷新就没有的
// 看时机用，不需要数据持久化就不用
import createPersistedState from "vuex-persistedstate";
import axios from "axios"
// vuex得问题一刷新浏览器，那所有的数据就都初始化了
// vue 是一个状态管理工具，公共数据存放得仓库，每一个组件都可以访问得数据，
// 解决了组件之间传值复杂得问题
// 从今天开始，要用vuex统一得管理数据
Vue.use(Vuex)

export default new Vuex.Store({
  // plugins: [createPersistedState()],
  plugins: process.env.NODE_ENV !== 'production' ? [createLogger()] : [],
  state: {   // 存放仓库得数据的
       name:"zhangsan",
       arr:[],
       num:10,
       age10:50
  },
  getters: { // vuex里的计算属性，他类似于组件里的computed
     bignum(state){
          return state.num * 10
     }
  },
  mutations: {  // 这个对象中就放修改仓库数据的方法，同步方法
    setName1(state,payload){
         console.log(payload,123)
         state.name = payload
    },
    setArr(state,payload){
        state.arr = payload
    },
    setNum(state,payload){
        state.num = payload
    }
  },
  actions: { // 放异步得方法,vuex不推荐在action中直接修稿state得数据，希望通过mutations来修改
       getList({commit,state},payload){
            axios.get("https://baojia.chelun.com/v2-car-getMasterBrandList.html").then(res=>{
                console.log(res.data.data)
                commit("setArr",res.data.data)
            })
       }
  },
  modules: {
  }
})
